<style lang="less" scoped="scoped">
  @import "../assets/css/config.less";
.container{
    width: 970px;
    margin: 0 auto;
    padding: 0 20px;
}
.back-row{
    width: 970px;
    margin: 0 auto;
    padding: 20px 20px;
    text-align: left;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    // border-bottom: 1px solid #eee;
}
.header{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
#content{
    margin-top: 150px;
}
.back-button{
    background-color: @color1;
    border: none;
    outline: none;
    color: @white;
    font-size: 14px;
    height: 40px;
    width: 120px;
    border-radius: 4px;
    &:hover{
        background-color: @color2;
    }
    &:active{
        background-color: @color3;
    }
}
.el-button.is-plain{
  &:hover{
    color: @color2;
    border-color: @color2;
  }
}
.button-group{
    display: flex;
    justify-content: flex-end;
    .left{
        border-radius: 4px 0 0 4px;
    }
    .right{
        border-radius: 0 4px 4px 0;
    }
    .active{
        background-color: @color1;
        border: 1px solid @color1;
        outline: none;
        color: @white;
        font-size: 14px;
        height: 40px;
        width: 120px;
        
        &:hover{
            background-color: @color2;
            border: 1px solid @color2;
        }
    }
    .no-active{
        background-color: @white;
        border: 1px solid #ccc;
        outline: none;
        color: #000;
        font-size: 14px;
        height: 40px;
        width: 120px;
        &:hover{
            background-color: @white;
            border: 1px solid @color2;
            color: @color3;
        }
        &:active{
            background-color: @color6;
            border: 1px solid @color2;
            color: @color3;
        }
    }
}
</style>
<style lang="less">
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
        color: #ED7632!important;
    }
    .el-tabs__item.is-top{
        &:hover{
            color: #ED7632!important;
        }
    }
</style>
<template>
    <div  id="index">
        <div  class="header">
            <myheader></myheader>
            <div class="back-row"> 
                <button class="back-button" type="primary" @click="back">
                    <Icon class="el-icon-back"/> &nbsp;返回&nbsp;
                </button>
                <div class="button-group">
                    <button class="left" :class="!showstyle?'active':'no-active'" @click="showstyle=false">按行显示</button>
                    <button class="right" :class="showstyle?'active':'no-active'" @click="showstyle=true">左右显示</button>
                </div>
            </div>
        </div>
        <div id="content">
            <div class="container">
                <el-tabs type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="html代码">
                        <code-diff :old-string="oldStr" :outputFormat="showstyle?'side-by-side':'line-by-line'" :new-string="newStr" :context="10" />
                    </el-tab-pane>
                    <el-tab-pane label="js代码">
                        <code-diff :old-string="oldStr" :outputFormat="showstyle?'side-by-side':'line-by-line'" :new-string="newStr" :context="10" />
                    </el-tab-pane>
                    <el-tab-pane label="css代码">
                        <code-diff :old-string="oldStr" :outputFormat="showstyle?'side-by-side':'line-by-line'" :new-string="newStr" :context="10" />
                    </el-tab-pane>
                </el-tabs>
                
            </div>
        </div>
    </div>
</template>
 
<script> 
import header from "../components/header.vue";
import CodeDiff from 'vue-code-diff';
import { get_codeCollected } from "../api/api";
export default {  
    name: "Compared",
    data(){
        return{
            new: '',
            old: '',
            oldStr:'',
            newStr:'',
            id: '',
            UUID: '',
            showstyle: false
        }
    },
    created(){ 
        this.id = sessionStorage.getItem("codeComparedId")
    },
    mounted(){
        this.codeInit()
    },
    components: {
        CodeDiff : CodeDiff,
        myheader: header 
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
        handleClick(tab, event) {
            if(tab.index==='0'){
                this.newStr = this.new.html;
                this.oldStr = this.old.html_content;
            } else if (tab.index==='1'){
                this.newStr = this.new.js;
                this.oldStr = this.old.js_content;
            } else if (tab.index==='2'){
                this.newStr = this.new.css;
                this.oldStr = this.old.css_content;
            }
        },
        codeInit(){
            get_codeCollected({
            id: this.id
            }).then(res => {
                if(res.state === true) {
                    this.new = res.msg.new[0];
                    this.old = res.msg.old;
                    this.newStr = this.new.html;
                    this.oldStr = this.old.html_content;
                }
            })
        },
    }
}


</script>
